<template>
  <div>
    <van-nav-bar >
      <template #left>
        <van-icon name="setting-o" color="#000" size="22" />
      </template>
      <template #right>
        <van-icon name="chat-o" color="#000" size="22" badge="9"/>
      </template>
    </van-nav-bar>
    <div class="cp_1">
      <div class="zt_1">免费收藏10万道菜谱</div>
      <img class="img_1" :src="login_1" alt="">
    </div>
    <van-button type="primary" block round to="/login_my">手机号登录</van-button>
    <div class="center">
      <a class="button" @click="s()">其他登录方式
        <van-icon :name="checked ? down : up" />
      </a>
      <van-row v-show="!checked">
        <van-col span="8">
        <a>
          <van-image :src="wx" width="30"/>
        </a>
        </van-col>
        <van-col span="8">
        <van-image :src="qq" width="30"/>
        </van-col>
        <van-col span="8">
        <van-image :src="wb" width="30"/>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      checked: true,
      up: require('../assets/icon/icon_login_arrow_up.png'),
      down: require('../assets/icon/icon_login_arrow_down.png'),
      qq:require('../assets/icon/icon_share_qq_friend.png'),
      wx:require('../assets/icon/icon_share_weixin.png'),
      wb:require('../assets/icon/icon_share_weibo.png'),
      login_1:require('../assets/image/661614835122_.pic_hd.jpg')
    }
  },
  methods:{
    s(){
      if(this.checked == true){
        this.checked = false;
      }else{
        this.checked = true;
      }
    },
    
  }
}
</script>
<style scoped>
.van-button--primary{
  background-color: #48803f;
  border: 1px solid #52794c;
}
.van-button--block {
  width: 90%;
  margin: 0 auto;
}
.button{
  border: 1px solid #fff;
  text-align: center;
  color: #666;
  font-size: 12px;
  display: inline-block;
  margin: 12px 0;
}
.center{
  text-align: center;
}
.cp_1{
  color: #333;
  font-size: 24px;
  text-align: center;
}
.img_1{
  width: 65%;
  margin-bottom: 50px;
}
.zt_1{
  margin-bottom: 25px;
  margin-top: 40px;
}
.van-hairline--bottom::after {
  border-bottom-width: 0; 
}
</style>